<template>
	<view class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top"  class="theme_bg_color">
				<cu-custom id="nav" :isBack="true"  :backColor="'text-black'">
					<block slot="backText">
						<view class="text-black ">
							我的资金明细
						</view>
					</block>
				</cu-custom>
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
							v-for="(item,index) in ['买单记录','充值记录','退款记录']" :key="index" @click="tabSelect"
							:data-id="index">
							{{item}}
						</view>
					</view>
				</scroll-view>
				<view class="">
					<view v-show="TabCur===0" class="flex justify-between padding-lr-lg padding-tb-sm text-sm">
						<view>logo</view>
						<view>剧本名</view>
						<view>支付金额</view>
						<view>支付方式</view>
						<view>折扣方式</view>
						<view>支付时间</view>
					</view>
					<view v-show="TabCur===1" class="flex justify-between padding-lr-lg padding-tb-sm text-sm">
						<view>充值金额</view>
						<view>赠送金额</view>
						<view>充值时间</view>
					</view>
					<view v-show="TabCur===2" class="flex justify-between padding-lr-lg padding-tb-sm text-sm">
						<view>logo</view>
						<view>剧本名</view>
						<view>退款金额</view>
						<view>退回账户</view>
						<view>退款时间</view>
					</view>
				</view>
			</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="list bg-white">
				<view  v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
					<view class="item flex justify-between solid-bottom" v-show="TabCur===0">
						<view class="cu-avatar radius12" :style="'background-image: url('+$isHttp(item.playPicture)+')'"></view>
						<view class="text-cut text-sm" style="width: 160rpx;">{{item.playName}}</view>
						<view class="text-red text-bold">{{item.payment}}</view>
						<view class="text-green text-bold">{{item.pay_type===0?'余额':''}}{{item.pay_type===1?'微信':''}}{{item.pay_type===2?'钻石卡':''}}</view>
						<view class="text-cut text-sm">{{item.discount_method}}</view>
						<view class="text-center">
							<view>{{item.time.split(' ')[0]}}</view>
							<view>{{item.time.split(' ')[1]}}</view>
						</view>
					</view>
					<view class="item flex justify-between solid-bottom" v-show="TabCur===1">
						<view class="text-green text-bold">+{{item.recharge}}</view>
						<view class="text-red text-bold">+{{item.desc}}</view>
						<view class="text-center">
							<view>{{item.time.split(' ')[0]}}</view>
							<view>{{item.time.split(' ')[1]}}</view>
						</view>
					</view>
					<view class="item flex justify-between solid-bottom" v-show="TabCur===2">
						<view class="cu-avatar radius12" :style="'background-image: url('+$isHttp(item.playPicture)+')'"></view>
						<view class="text-cut" style="width: 160rpx;">{{item.playName}}</view>
						<view class="text-red text-bold">{{item.payment}}</view>
						<view class="text-green text-bold">{{item.pay_type===0?'余额':''}}{{item.pay_type===1?'微信':''}}{{item.pay_type===2?'钻石卡':''}}</view>
						<view class="text-center">
							<view>{{item.time.split(' ')[0]}}</view>
							<view>{{item.time.split(' ')[1]}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPagingMixin],
		data() {
			return {
				dataList: [],
				TabCur: 0
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				this.$u.api.recharge({
					userId:this.vuex_user.id,
					select: this.TabCur,
					page:pageNo,
					number:pageSize
				}).then(res => {
					this.$refs.paging.complete(res.data);
				})
			},
			itemClick(item) {
				console.log('点击了', item.title);
			}
		}
	}
</script>

<style lang="scss">
	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>
